import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import {AtList,AtListItem} from 'taro-ui'
import './suifangjihua.scss'
import app from '../../../../main.js'
// import reactMixin from 'react-mixin'
// import myJs from './suifangjihuaJs.js'

export default class Suifangjihua extends Component {

    constructor () { 
        super(...arguments); 
        this.state={
            list1:[],
            list2:[]
        }
    }

    config = {
        navigationBarTitleText: '随访计划'
    }

    offset = 0 
    length = 10
    total = 0

    onReachBottom(){
        if(this.offset + this.length < this.total){
            this.offset = this.offset + this.length;
            this.resetData();
        }
    }

    getData1(){
        let me = this;
        let data ={offset:0,length:20,type:"个人"}
        app.get('web/flow_template/many', data, function(res){
            me.setState({
                list1:res.data.result.list
            })
        })
    }

    getData2(){
        let me = this;
        let data ={offset:0,length:20,type:"系统"}
        app.get('web/flow_template/many', data, function(res){
            me.setState({
                list2:res.data.result.list
            })
        })
    }

    resetData(){
        let me = this;
        let data = {offset:this.offset,length:this.length,type:"系统"};
        let dataArray = [];
        app.get('web/flow_template/many',data,(res)=>{
            dataArray = this.list2.concat(res.data.result.list);
            me.total = res.data.result.total;
            me.setState({
                list2:dataArray
            })
        })
    }

    go=(url)=>{
        app.navigateTo(url);
    }

    goto(){
        // '../confirmsuifangfangan/confirmsuifangfangan?type=个人&id=')
        if(this.$router.params.patient_id){
            app.navigateTo('../confirmsuifangfangan/confirmsuifangfangan?type=个人&patient_id='+this.$router.params.patient_id)
        }else{
            app.navigateTo('../confirmsuifangfangan/confirmsuifangfangan?type=个人&id=')
        }
    }

    // 跳转到下个页面
    toNext(type, id, doctor_id) {
        var patient_id = this.$router.params.patient_id;
        if (app.isEmpty(patient_id)) {
            app.navigateTo('../confirmsuifangfangan/confirmsuifangfangan?type='+type+'&id='+id);
        } else {
            app.navigateTo('../editsuifangfangan/editsuifangfangan?patient_id='+patient_id+'&flow_template_id='+id+'&from_page='+this.$router.params.from_page+'&doctor_id='+doctor_id);
        }
    }

    init() {
        this.setState({
            targetPage:''
        });
        switch(this.$router.params.type){
            case 'setplan':
            this.setState({
                targetPage:'../confirmsuifangfangan/confirmsuifangfangan?type=setplan'
            });
            break;
            case 'selectplan':
            this.setState({
                targetPage:'../confirmsuifangfangan/confirmsuifangfangan?type=selectplan'
            });
            break;
        };
        this.getData1();
        this.getData2();
    }

    componentWillMount () {
        
    }
    componentDidMount () {

    }
    componentWillUnmount () {

    }
    componentDidShow () {
        this.init();
    }
    componentDidHide () {

    }

    render () {
        
        const list1 = this.state.list1;
        const list2 = this.state.list2;
      
        const person = list1.map((item)=>{
            return <AtListItem title={item.title} key={item.id} onClick={this.toNext.bind(this, item.type, item.id, item.doctor_id)} arrow='right'></AtListItem>
        })

        const system = list2.map((sys)=>{
            return <AtListItem title={sys.title} key={sys.id} onClick={this.toNext.bind(this, sys.type, sys.id)} arrow='right'></AtListItem>
        })


        return (
            <View className='suifangjihua'>
                {/* <AtList className=' class_0'>
                    <AtListItem onClick={this.go.bind(this,'../suifangjihuadoing/suifangjihuadoing')} title='进行中的随访计划' arrow='right' hasBorder={false} extraText='5' thumb={app.imageUri+'img/icon-book.png'}></AtListItem>
                </AtList> */}
                <AtList className=' class_1'>
                    <AtListItem title='新建随访计划' onClick={this.goto.bind(this)} arrow='right' hasBorder={false} thumb={app.imageUri+'img/icon-pen.png'}></AtListItem>
                </AtList>
                <View>
                    <View className=' class_2'>
                        <Text className=' class_3'>我的随访计划</Text>
                    </View>
                    <AtList className=' class_4'>
                        {person}
                    </AtList>
                </View>
                <View>
                    <View className=' class_5'>
                        <Text className=' class_6'>系统推荐随访计划</Text>
                    </View>
                    <AtList className=' class_7'>
                        {system}
                    </AtList>
                </View>
            </View>
        );
    }
}
// reactMixin.onClass(Suifangjihua,myJs);